<template>
  <div class="box" v-loading="loading">
    <div class="box1">
      <div class="logo">
        <img src="../../assets/new.svg" alt="大事件管理系统" />
      </div>
      <div class="titleBox">
        <div class="title">大事件管理系统</div>
        <div class="url">shuonihao.cn</div>
      </div>
    </div>

    <div class="box2">
      <div class="chahua">
        <img src="../../assets/1.jpg" alt="大事件管理系统" />
      </div>
      <div class="formBox">
        <div class="form">
          <span class="line1"></span>
          <span class="line2"></span>
          <span class="line3"></span>
          <span class="line4"></span>
          <div class="welcome">大事件管理系统欢迎您！</div>
          <el-form ref="ruleForm" :rules="rules" :model="form" class="login-content-form">
            <el-form-item prop="account">
              <el-input
                text
                placeholder="请输入用户名"
                v-model="form.account"
                clearable
                autocomplete="on"
              >
                <template #prefix>
                  <i class="el-icon-user-solid"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                text
                placeholder="请输入密码"
                v-model="form.password"
                show-password
                clearable
                autocomplete="off"
              >
                <template #prefix>
                  <i class="el-icon-lock"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="value">
              <el-col :span="14">
                <el-input
                  text
                  maxlength="6"
                  placeholder="请输入验证码"
                  v-model="form.value"
                  clearable
                  autocomplete="off"
                  @keyup.native.enter="onSubmit()"
                >
                  <template #prefix>
                    <i class="el-icon-s-promotion"></i>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="2" style="color: #fff">---</el-col>
              <el-col :span="8" class="imgCodeBox">
                <div
                  @click="getImageData"
                  v-html="checkCode.imageData"
                  class="imgCode"
                ></div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit()"
                class="login-content-submit"
                round
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { userApi } from '../../apis/user'
const user = userApi()
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data () {
    return {
      form: {
        account: '',
        password: '',
        value: '',
        keyCode: ''
      },
      checkCode: {
        codeKey: '',
        imageCode: '',
        imageData: ''
      },
      loading: false,
      rules: {
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        value: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入6位验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getImageData () {
      user.checkCode().then((res) => {
        if (res) {
          if (res && res.code === 200) {
            this.checkCode.codeKey = res.data.codeKey
            this.form.keyCode = res.data.codeKey
            this.checkCode.imageData = res.data.imageData
          }
        }
      })
    },
    onSubmit () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          user.login(this.form).then(
            (res) => {
              if (!res) {
                return
              }
              if (res.code === 200) {
                this.loading = true
                this.getToken(res.data.token)
                this.setUsername(res.result[0].username)
                this.setUserAvatar(res.result[0].avatarurl)
                this.setAccount(res.result[0].account)
                // console.log('登录成功')
                setTimeout(() => {
                  this.loading = false
                  this.$message({
                    message: '欢迎您，登录成功！',
                    type: 'success'
                  })
                  this.$router.push('/')
                }, 300)
              } else {
                if (res.msg === '验证码错误') {
                  this.$message({
                    message: '验证码错误！',
                    type: 'error'
                  })
                  this.getImageData()
                } else if (res.msg === '验证码已过期') {
                  this.getImageData()
                  this.$message({
                    message: '验证码已过期',
                    type: 'warning'
                  })
                } else if (res.msg === '用户名或密码错误') {
                  this.$message({
                    message: '用户名或密码错误！',
                    type: 'error'
                  })
                }
              }
            },
            () => {
              this.$message({
                message: '网络异常',
                type: 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    ...mapActions('user', ['setUsername', 'getToken', 'setUserAvatar', 'setAccount'])
  },
  mounted () {
    this.getImageData()
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 7fr;
  .box1 {
    display: grid;
    grid-template-columns: 1fr 2fr 10fr;
    .logo {
      width: 100%;
      display: flex;
      justify-content: right;
      img {
        // width: 50%;
        scale: 0.7;
      }
    }
    .titleBox {
      display: grid;
      grid-template-rows:1.5fr 1fr;
      .title {
        display:flex;
        align-items:center;
        font-size: 1.3em;
        font-weight: 700;
      }
      .url {
        font-size: 1em;
      }
    }
  }
  @media screen and (min-width:1080px){
    .box2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .form {
      width: 60%;
      height: 80%;
    }
  }
  @media screen and (min-width:500px) and (max-width:1079px) {
    .box1{
      display:none;
    }
    .box2 {
      display: grid;
      grid-template-columns: 0fr 1fr;
    }
    .form {
      width: 60%;
      height: 80%;
    }
  }
  @media screen and (min-width:0px) and (max-width:500px) {
    .box1{
      display:none;
    }
    .box2 {
      display: grid;
      grid-template-columns: 0fr 1fr;
    }
    .form {
      width: 80%;
      height: 30rem;
      margin-top:100px;
    }
  }
  .chahua {
    width: 100%;
    text-align: center;
    img {
      width: 80%;
    }
  }
  .formBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .form {
      border: 1px solid #000;
      border-radius: 2px;
      position: relative;
      display: block;
      padding: 1.5rem 2rem;
      letter-spacing: 0.1rem;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;
      transition: 1s;
      overflow: hidden;
      display: grid;
      grid-auto-rows: 1fr 2fr;
      .welcome {
        font-size: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .login-content-submit {
        width: 100%;
        letter-spacing: 2px;
        color: #fff;
        font-weight: 500;
        margin-top: 1rem;
      }
      .imgCodeBox{
        height:42px;
      }
      .imgCode {
        // width: 130px;
        height: 100%;
        border: 1px solid #dcdfe6;
        cursor: pointer;
        display:flex;
        justify-content:center;
        align-items:center;
        svg {
          flex:0 0;
          // scale: 0.5;
          object-fit:cover;
          height: 100%;
        }
      }
      span {
        position: absolute;
        display: block;
      }
      span:nth-child(1) {
        top: 0;
        left: 0;
        width: 100%;
        height: 0.2rem;
        background: linear-gradient(90deg, transparent, #010101);
        animation: animate1 2s linear infinite;
      }
      @keyframes animate1 {
        0% {
          left: -100%;
        }
        50%,
        100% {
          left: 100%;
        }
      }
      /* 从上到下 */
      span:nth-child(2) {
        top: -100%;
        right: 0;
        width: 0.2rem;
        height: 100%;
        background: linear-gradient(180deg, transparent, #010101);
        animation: animate2 2s linear infinite;
        animation-delay: 0.5s;
      }
      @keyframes animate2 {
        0% {
          top: -100%;
        }
        50%,
        100% {
          top: 100%;
        }
      }
      span:nth-child(3) {
        right: -100%;
        bottom: 0;
        width: 100%;
        height: 0.2rem;
        background: linear-gradient(270deg, transparent, #010101);
        animation: animate3 2s linear infinite;
        animation-delay: 1s;
      }
      @keyframes animate3 {
        0% {
          right: -100%;
        }
        50%,
        100% {
          right: 100%;
        }
      }
      span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 0.2rem;
        height: 100%;
        background: linear-gradient(360deg, transparent, #010101);
        animation: animate4 2s linear infinite;
        animation-delay: 1.5s;
      }
      @keyframes animate4 {
        0% {
          bottom: -100%;
        }
        50%,
        100% {
          bottom: 100%;
        }
      }
    }
  }
}
</style>
